<template>
  <div class="app-container">
    <div class="h-100 w-100 d-flex flex-wrap">
      <div class="h-2 w-8 p10">
        <div class="h-100 w-100 item_border">
          <div class="height-15 d-flex align-items-center justify-content-between">
            <div class="font-white">
              <div class="d-flex align-items-center pl10">
                <div class="success_point"></div>
                <div class="font-14">水温监测</div>
              </div>
            </div>
          </div>
          <div class="height-85 w-100 pb-2 d-flex-center">
            <div class="w-3 h-100 pl10 pr10">
              <div class="h-100 w-100 echarts_ybp p10">
                <div class="height33 font-white ml-1">1号楼南水箱温度</div>
                <div class="height97 w-100" id="echart_one"></div>
              </div>
            </div>
            <div class="w-3 h-100 pl10 pr10">
              <div class="h-100 w-100 echarts_ybp p10">
                <div class="height33 font-white ml-1">1号楼北水箱温度</div>
                <div class="height97 w-100" id="echart_two"></div>
              </div>
            </div>
            <div class="w-3 h-100 pl10 pr10">
              <div class="h-100 w-100 echarts_ybp p10">
                <div class="height33 font-white ml-1">3号楼南水箱温度</div>
                <div class="height97 w-100" id="echart_three"></div>
              </div>
            </div>
            <div class="w-3 h-100 pl10 pr10">
              <div class="h-100 w-100 echarts_ybp p10">
                <div class="height33 font-white ml-1">3号楼北水箱温度</div>
                <div class="height97 w-100" id="echart_four"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="h-2 w-4 p10">
        <div class="h-100 w-100 item_border">
          <div class="height-15 d-flex align-items-center justify-content-between">
            <div class="font-white">
              <div class="d-flex align-items-center pl10">
                <div class="success_point"></div>
                <div class="font-14">总开关控制</div>
              </div>
            </div>
          </div>
          <div class="height-85 w-100 pb-2 d-flex-center">
            <div class="w-6 h-100 pl10 pr10" v-for="(item,index) in cardDataStatus2" :key="index">
              <div class="h-100 w-100 p10 border_two over-hidden" :class="dataCardBgColor[item.socketColor]" @click="setStatusByDevice(item)">
                <div class="height33 font-white ml-1">{{index==0?'1号楼太阳能总控':'3号楼太阳能总控'}}</div>
                <div class="height97 w-100 d-flex-center">
                  <el-image class="img_size_144" :src="z_control" fit="cover"></el-image>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="h-4 w-9 p10">
        <div class="h-100 w-100 item_border">
          <div class="height-5 d-flex align-items-end justify-content-between">
            <div class="font-white">
              <div class="d-flex align-items-center pl10">
                <div class="success_point"></div>
                <div class="font-14">1号楼开关控制</div>
              </div>
            </div>
          </div>
          <div class="height-95 w-100 d-flex-center flex-wrap">
            <div class="w-2 h-50" v-for="(item,index) in cardDataStatus3" :key="index">
              <div class="h-100 w-100 p10">
                <div class="h-100 w-100 p10 border_two" :class="dataCardBgColor[item.socketColor]"
                     @click="setStatusByDevice(item)">
                  <div class="height33 font-white ml-1">{{cardTitle[index]}}</div>
                  <div class="height97 w-100 d-flex-center">
                    <el-image class="img_size_94" :src="carDataBgImg[index]" fit="cover"></el-image>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="h-4 w-3 p10">
        <div class="h-100 w-100 item_border">
          <div class="height-5 d-flex align-items-end justify-content-between">
            <div class="font-white">
              <div class="d-flex align-items-center pl10">
                <div class="success_point"></div>
                <div class="font-14">3号楼开关控制</div>
              </div>
            </div>
          </div>
          <div class="height-95 w-100 d-flex-center flex-wrap">
            <div class="w-6 h-50" v-for="(item,index) in cardDataStatus5" :key="index">
              <div class="h-100 w-100 p10">
                <div class="h-100 w-100 p10 border_two" :class="dataCardBgColor[item.socketColor]"
                     @click="setStatusByDevice(item)">
                  <div class="height33 font-white ml-1">{{cardTitle2[index]}}</div>
                  <div class="height97 w-100 d-flex-center">
                    <el-image class="img_size_94" :src="carDataBgImg2[index]" fit="cover"></el-image>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from './chart.js'
  import {
    queryOneListSunControlByNum,
    queryTwoListSunControlByStatus,
    queryThreeListSunControlByStatus,
    queryFourListSunControlByNum,
    queryFiveListSunControlByStatus
  } from "@/api/solarEnergy/operationMonitor"
  import { makeDeviceControl, queryControlList } from "@/api/dormOneBuildingOneFloor/electricityManagement";

  const ytn = require('@/assets/img/ytn.png')
  const cskg = require('@/assets/img/cskg.png')
  const z_control = require('@/assets/img/z_control.png')
  const ddkg = require('@/assets/img/kg.png')
  const qdqkg = require('@/assets/img/qdqkg.png')
  const jdq = require('@/assets/img/jdq.png')
  const qnkg = require('@/assets/img/qnkg.png')
  const sxkg = require('@/assets/img/sxkg.png')

  export default {
    data() {
      return {
        timeout: [],
        z_control: require('@/assets/img/z_control.png'),
        cardData1: {
          deviceCode: '',
          deviceValue: '',
        },
        cardData2: {
          deviceCode: '',
          deviceValue: '',
        },
        cardData3: {
          deviceCode: '',
          deviceValue: '',
        },
        cardData4: {
          deviceCode: '',
          deviceValue: '',
        },
        cardDataStatus2: {},
        cardDataStatus3: [],
        cardDataStatus5: [],
        cardTitle: ['东1空气能开关', '东2空气能开关', '东3空气能开关', '东4空气能开关', '西1空气能开关', '西2空气能开关',
          '西3空气能开关', '南、北循环泵开关 ', '南、北水箱+继电器开关', '继电器开关', '北水箱开关', '南水箱开关'],
        carDataBgImg: [qnkg, qnkg, qnkg, qnkg, qnkg, qnkg,
          qnkg, cskg, jdq, qdqkg, sxkg, sxkg],
        cardTitle2: ['北空气能开关', '南空气能开关', '水箱+循环泵开关', '水箱控制器开关'],
        carDataBgImg2: [qnkg, qnkg, jdq, sxkg],
        dataCardBgColor: ['item_bg_close', 'item_bg_open', 'item_bg_danger', 'item_bg_blue', 'item_bg_warning', 'bg-index-red', 'bg-index-orange'],
      }
    },
    created() {
      this.queryOneListSunControlByNum()
      this.queryTwoListSunControlByStatus()
      this.queryThreeListSunControlByStatus()
      this.queryFiveListSunControlByStatus()
    },
    mounted() {
      let _this = this
      this.timeout[0] = setInterval(() => {
        _this.queryOneListSunControlByNum()
      }, 30000);
      this.timeout[1] = setInterval(() => {
        _this.queryTwoListSunControlByStatus()
        _this.queryThreeListSunControlByStatus()
        _this.queryFiveListSunControlByStatus()
      }, 15000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryOneListSunControlByNum() {
        queryOneListSunControlByNum().then(res => {
          let tempData = res.object || []

          this.cardData1.deviceValue = this.formatNumber(tempData[0].deviceValue)
          this.cardData1.deviceCode = tempData[0].deviceCode

          this.cardData2.deviceValue = this.formatNumber(tempData[1].deviceValue)
          this.cardData2.deviceCode = tempData[1].deviceCode

          this.cardData3.deviceValue = this.formatNumber(tempData[2].deviceValue)
          this.cardData3.deviceCode = tempData[2].deviceCode

          this.cardData4.deviceValue = this.formatNumber(tempData[3].deviceValue)
          this.cardData4.deviceCode = tempData[3].deviceCode

          charts.ybpEchart('echart_one', this.cardData1.deviceValue)
          charts.ybpEchart('echart_two', this.cardData2.deviceValue)
          charts.ybpEchart('echart_three', this.cardData3.deviceValue)
          charts.ybpEchart('echart_four', this.cardData4.deviceValue)
        })
      },

      queryTwoListSunControlByStatus() {
        queryTwoListSunControlByStatus().then(res => {
          let tempData = res.object
          this.cardDataStatus2 = tempData
        })
      },
      queryThreeListSunControlByStatus() {
        queryThreeListSunControlByStatus().then(res => {
          let tempData = res.object
          this.cardDataStatus3 = tempData
        })
      },
      queryFiveListSunControlByStatus() {
        queryFiveListSunControlByStatus().then(res => {
          let tempData = res.object
          this.cardDataStatus5 = tempData
        })
      },

      setStatusByDevice(data) {
        this.dataItem = data

        let obj = {}
        if (data.deviceList[data.deviceList.length - 2].deviceValue == '0') {
          obj = {
            command: '65365',
            commandName: '合闸',
            parameterCode: 'CTRL',
          }
        } else {
          obj = {
            command: '65280',
            commandName: '分闸',
            parameterCode: 'CTRL',
          }
        }
        this.editControl(obj, 'other')
      },
      editControl(data, type) {
        let titleName = '确定执行此操作吗, 是否继续?'
        if (type == 'other') {
          if (data.commandName == '合闸') {
            titleName = '确定执行合闸操作吗, 是否继续?'
          } else {
            titleName = '确定执行分闸操作吗, 是否继续?'
          }
        }
        this.$confirm(titleName, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {

          makeDeviceControl({
            deviceCode: this.dataItem.deviceCode,
            parameterCode: data.parameterCode,
            command: data.command,
            commandName: data.commandName,
          }).then(res => {
            if (res.status == 200 && (res.message == '指令发送成功' || res.message == '指令发送成功等待核验')) {
              setTimeout(() => {
                this.queryOneListSunControlByStatus()
                this.$message({
                  type: "success",
                  message: res.message
                })
              }, 2000)
            }
          })
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          })
        })
      },

      formatNumber(numberStr) {
        try {
          let number = parseFloat(numberStr);

          if (isNaN(number)) {
            throw new Error("Invalid number format: " + numberStr);
          }

          // 保留一位小数并向下取整
          let roundedNumber = Math.trunc((number * 10).toFixed(1)) / 10;

          // 如果结果为0或-0，返回字符串"0"
          if (roundedNumber === 0) {
            return 0;
          }

          return roundedNumber;
        } catch (e) {
          console.error(e.message);
          return null;
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .height-95 {
    height: 95%;
  }

  .height-85 {
    height: 85%;
  }

  .height-33 {
    height: 33.33%;
  }

  .height-15 {
    height: 15%;
  }

  .height-5 {
    height: 5%;
  }

  .height33 {
    height: 20px;
  }

  .height97 {
    height: calc(100% - 20px)
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .img_size_94 {
    width: 94px;
    height: 94px;
  }

  .img_size_144 {
    width: 110px;
    height: 110px;
  }

  .content_value {
    font-family: Impact, Impact-400;
    font-weight: 400;
    color: #ffffff;
    font-size: 40px;
  }

  .content_unit {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
    padding-bottom: 4px;
  }

  .border_two {
    border-radius: 6px;
  }

  .item_bg_open {
    background-color: #1AA652;
    cursor: pointer;
  }

  .item_bg_open:hover {
    transform: scale(1.05);
  }

  .item_bg_danger {
    background-color: #df547b;
    cursor: pointer;
  }

  .item_bg_danger:hover {
    transform: scale(1.05);
  }

  .item_bg_close {
    background-color: #7A7A7A;
    cursor: pointer;
  }

  .item_bg_close:hover {
    transform: scale(1.05);
  }

  .item_bg_blue {
    background: #2C637A;
    cursor: pointer;
  }

  .item_bg_blue:hover {
    transform: scale(1.05);
  }

  .item_bg_warning {
    background: #B3A12F;
    cursor: pointer;
  }

  .item_bg_warning:hover {
    transform: scale(1.05);
  }

  .bg-index-red {
    background: #AF1F1F;
    cursor: pointer;
  }

  .bg-index-red：hover {
    transform: scale(1.05);
  }

  .echarts_ybp {
    background: rgba(3, 22, 28, 0.20);
    border: 1px solid rgba(10, 96, 117, 0.62);
    border-radius: 4px;
    box-shadow: 0px 0px 15.5px 6px rgba(7, 193, 96, 0.51) inset;
  }
</style>
